<template>
  <a-card :bordered="false">
    <!-- 左侧面板 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="12">
          <a-col :md="7" :sm="8">
            <a-form-item label="订单号" :labelCol="{ span: 6 }" :wrapperCol="{ span: 14, offset: 1 }">
              <a-input placeholder="请输入订单号" v-model="queryParam.ordersn"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="手机号" :labelCol="{ span: 6 }" :wrapperCol="{ span: 14, offset: 1 }">
              <a-input placeholder="请输入手机号" v-model="queryParam.phone"></a-input>
            </a-form-item>
          </a-col>

            <template v-if="toggleSearchStatus">
            <a-col :md="6" :sm="8">
              <a-form-item label="身份证号">
                <a-input placeholder="请输入身份证号" v-model="queryParam.idcard"></a-input>
              </a-form-item>
            </a-col>

            <!--状态1-待付款2-待使用 3-已使用4-售后 5-失效订单-->
            <a-col :md="6" :sm="8">
              <a-form-item label="订单状态">
                <a-select v-model="queryParam.status" placeholder="请选择">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">待付款</a-select-option>
                  <a-select-option value="2">待使用</a-select-option>
                  <a-select-option value="3">已使用</a-select-option>
                  <a-select-option value="4">售后</a-select-option>
                  <a-select-option value="5">失效订单</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>        


          <a-col :md="7" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
               <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>

      <div class="table-operator" style="border-top: 5px">
        <!-- <a-button @click="setAdd" type="primary" icon="plus">添加</a-button> -->
        <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>

        
      </div>

<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>


      <a-table
        ref="table"
        rowKey="id"
        size="middle"
        :scroll="{x: 1500}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
      >

        <img slot="pic" slot-scope="text" style="width:40px;height:40px;border-radius: 50%;" :src="text" />

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">
            <a-icon type="edit" />
            编辑
          </a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>

    <step-order ref="modalForm" @ok="modalFormOk"></step-order>

    <order-model ref="orderForm" @ok="modalFormOk" ></order-model>

  </a-card>
</template>

<script>
import stepOrder from './modules/StepOrder';
import orderModel from './modules/orderModel';
import { BasePostMixin } from '@/mixins/BasePostMixin'
import { filterObj } from '@/utils/util';
import {getDict} from '@/api/api'
export default {
  name: 'userList',
  mixins:[BasePostMixin],
  components: {
    stepOrder,
    orderModel
    },
  data() {
    return {
      // 查询条件
      queryParam: {},
       // 表头
        columns: [         
          {
            title: '活动名称',
            align: "left",
            width: 150,
            dataIndex: 'title',
            ellipsis: true,
            customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={text}>
              {text}
            </a-tooltip>
          ),
          },
          {
            title: '订单号',
            align: "left",
            width: 150,
            dataIndex: 'orderSn',
            ellipsis: true,
            customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={text}>
              {text}
            </a-tooltip>
          ),
          },
          {
            title: '姓名',
            align: "left",
            dataIndex: 'name',
          },
          {
            title: '手机号',
            align: "left",
            dataIndex: 'phone',
            customRender: function (t) {
              return t ? t.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") : '';
            }
          },
           {
            title: '身份证号',
            align: "left",
            dataIndex: 'idCard',
            customRender: function (t) {
              return t ? t.replace(/^(.{6})(?:\d+)(.{4})$/,"$1****$2") : '';
            }   
          },
          {
            title: '是否已参保',
            align: "center",
            dataIndex: 'insurance',
            customRender:function (t) {
              return t==1? '是': '否';
            }
          },{
            title: '支付金额',
            align: "left",
            width: 120,
            dataIndex: 'price',
          },{
            title: '订单数量',
            align: "center",
            width: 120,
            dataIndex: 'orderNum',
            customRender:function (t) {
              return t ? t: '1';
            }
          },{
            title: '订单状态',
            align: "left",
            dataIndex: 'status',
            customRender:function (t) {
              return getDict("order_status",t);
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        url: {
          list: "/wx/order/list",
          delete: "/wx/order/delete",
          deleteBatch:"/wx/order/deleteBatch"
        },
    }
  },
  created() {},
  methods: {
      getQueryParams() {
        var param = Object.assign({}, this.queryParam, this.isorter);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        if (this.superQueryParams) {
          param['superQueryParams'] = encodeURI(this.superQueryParams)
          param['superQueryMatchType'] = this.superQueryMatchType
        }
        return filterObj(param);
      },
      setAdd(){
        this.$refs.orderForm.add();
        this.$refs.orderForm.title = "新增";
        this.$refs.orderForm.disableSubmit = false;

      }
  },
}
</script>

<style scoped>
</style>